<template>
    <div class="coupon-mine">
            <div class="tabs-container">
                <div class="tabs-position" >
                    <van-row>
                        <van-col span="8" v-for="tab,index in tabsMenus" :key="index">
                            <div class="tabs-wrapper">
                                <div class="menu-title" :class="tab.status==tabStatus?'active':''" @click="changeTab(tab.status)">{{tab.menuTitle}}</div>
                                <ul class="menu" v-show="tab.status==tabStatus&&menuStatus">
                                    <li v-for="(menu,index) in menus" :key="index" @click="selectIssue(menu.issue)">{{menu.text}}</li>
                                </ul>
                            </div>
                        </van-col>
                    </van-row>
                </div>
            </div>
            <div class="my-coupon-container">
                <div class="list-wrapper">
                    <van-list
                            v-model="loading"
                            :finished="finished"
                            :finished-text="finishedText"
                            @load="onLoad">
                        <div class="coupon-flex coupon-vou-content" v-for="(item,index) in myCouponsCom" :key="index">
                            <div class="coupon-flex-box">
                                <div class="coupon-flex-inside">
                                    <div class="coupon-flex-cp-img">
                                        <img :src="item.logo">
                                    </div>
                                    <div class="coupon-flex-box">

                                        <div class="coupon-name">
                                            <em>{{item.couponName}}</em>
                                        </div>
                                        <div class="vip-level-names">
                                           卡券码 <small>{{item.redeemCode}}</small>
                                        </div>
                                        <div class="receiveNum">有效期: {{item.expireDateStart}}-{{item.expireDateEnd}}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="coupon-vou-button">
                                <button class="coupon-vou-btn-der" :class="item.btnClass"  @click="item.status==0&&toDetail(item.id)">{{item.text}}</button>
                            </div>
                        </div>
                    </van-list>
                </div>
            </div>
    </div>
</template>
<script>
    const  TABS_MENUS =[
        {status:0,menuTitle:'未使用',},
        {status:1,menuTitle:'已使用',},
        {status:2,menuTitle:'已过期',}
    ]
    const  MENUS =[
        {text:'全部卡券',issue:'all'},
        {text:'抢优惠券',issue:'ISS_QYHQ'},
        {text:'积分商城',issue:'ISS_JFSC'},
        {text:'中奖游戏',issue:'ISS_ZJYX'}
    ]
    const CP_STATUS = [
        {text: '去使用',btnClass:'to-use'},
        {text: '已使用',btnClass:'used'},
        {text: '已过期',btnClass:'expired'},
    ]
    const FINISHED_TEXT = ['没有更多了', '暂无记录']
    import Cookies  from 'js-cookie'
    import {isDev} from "../../utils/tools";
    export default {
        name: "CouponMine",
        data(){
            return {
                tabsMenus:TABS_MENUS,
                menus:MENUS,
                cpStatus:CP_STATUS,
                token:'',
                tabStatus:0,
                menuStatus:false,
                issueType:MENUS[0].issue,
                loading:false,
                finished:false,
                myCoupons:[],
                pageNo:1,
                pageSize:20,
                finishedText: FINISHED_TEXT[0]
            }
        },
        watch:{
            token(token){
                if(!token)Cookies.set('token',"oiQAFuA5sUC18iViiZmaHU8FK9-8", { expires: 7 });
                // if(!token)this.$router.replace('/login')
            }
        },
        created(){
            this.token = Cookies.get("token")||'oiQAFuA5sUC18iViiZmaHU8FK9-8'
            isDev&&console.log(this.token);
        },
        computed:{
            myCouponsCom(){
                return this.myCoupons.map(item=>{
                    item.text = this.cpStatus[item.status].text
                    item.btnClass = this.cpStatus[item.status].btnClass
                    return item
                })
            }
        },
        methods:{
            changeTab(id){
                // if(this.tabStatus==id){
                //     this.menuStatus=!this.menuStatus
                // }else{
                //     this.menuStatus=true
                //     this.tabStatus=id
                // }
                this.menuStatus=false
                this.tabStatus=id
                this.issueType=MENUS[0].issue
                this.fetchCouponMine()
            },
            selectIssue(issueType){
                //isDev&&console.log(this.tabsMenus[this.tabStatus])
                isDev&&console.log(issueType);
                this.menuStatus=!this.menuStatus
                if(this.issueType != issueType||issueType==MENUS[0].issue){
                    this.issueType = issueType
                    this.pageNo=1
                    this.fetchCouponMine()
                }
            },
            fetchCouponMine(){
                this.$api.couponmine.couponMine({openId: this.token,
                                                  status: this.tabStatus,
                                                  issue: this.issueType,
                                                  pageNo:this.pageNo,
                                                  pageSize:this.pageSize
                }).then(res=>{
                    isDev&&console.log(res)
                    this.myCoupons=[]
                    if(res.code==0){
                        let page = res.data
                        let list = page.list
                        this.loading=false;
                        this.finishedText =FINISHED_TEXT[0]
                        if(page.totalPage==0){
                            this.finishedText =FINISHED_TEXT[1]
                            this.finished=true;
                            return
                        }else if(page.currPage==1&&(!this.myCoupons||this.myCoupons.length<=0)&&(list&&list.length>0)){
                            this.myCoupons = list
                                this.finished=true;
                                return
                        }else if(page.totalPage==page.currPage&&page.currPage>1){
                            this.myCoupons = this.myCoupons.concat(list)
                            this.finished=true;
                            return
                        }else  if(page.currPage== this.pageNo){
                            this.finished=true;
                            return
                        }else{
                            this.myCoupons = this.myCoupons.concat(list)
                            this.pageNo++
                        }

                    }
                }).catch(error=>{})
            },
            onLoad(){
                this.fetchCouponMine()
            },
            toDetail(id){
                this.$router.push({path:'/coupon_code',query:{id:id}})
            }
        },

    }
</script>

<style lang="less">
    @import "../../assets/less/base";
.coupon-mine{
    .tabs-container{
        position: relative;
        height: 40px;
        .tabs-position{
            position: absolute;
            top:0;
            left: 0;
            right: 0;
            width: 100%;
            z-index: 999;
            .tabs-wrapper{
                height: 40px;
                .menu-title{
                    margin: 5px;
                    height: 30px;
                    text-align: center;
                    line-height: 30px;
                    border-radius: 30px;
                    border: 1px solid @main-theme-color;
                    color: @main-theme-color;
                    &.active{
                        background-color: @main-theme-color!important;
                        color: #ffffff!important;
                    }
                }
                ul.menu{
                    text-align: center;
                    border-radius: 15px;
                    background-color: #fff;
                    li{
                        margin: 8px auto;
                        width: 90%;
                        height: 24px;
                        color: @main-theme-color;
                    }
                }
            }
        }

    }
    .my-coupon-container{
        .list-wrapper{
            .coupon-vou-content {
                position: relative;
                background-color: #fff;
                margin: 5px 5px 10px 5px;
                padding: 0;
                height: 100px;
                border-radius: 5px;
                border: 1px solid #E8E8E8;
                overflow: hidden;
                &:first-child{
                    margin-top: 10px;
                }
                &.coupon-flex {
                    display: flex;
                    align-items: center;
                }
                .coupon-flex-box {
                    -webkit-box-flex: 1;
                    -webkit-flex: 1;
                    flex: 1;
                    height: 75px;
                    font-size: 14px;
                    color: #333;
                    .coupon-flex-inside{
                        display: -webkit-box;
                        display: -webkit-flex;
                        display: flex;
                        -webkit-box-align: center;
                        align-items: center;
                        padding: 0;
                        position: relative;
                        .coupon-flex-cp-img {
                            width: 75px;
                            height: 75px;
                            padding: 0px 5px;
                            img {
                                width: 100%;
                                height: auto;
                                display: block;
                                border: none;
                            }
                        }
                        .coupon-flex-box {
                            position: relative;
                            .coupon-name {
                                color: @main-theme-color;
                                font-weight: bold;
                                text-align: left;
                                em {
                                    font-style: normal;
                                    font-weight: bold;
                                    font-size: 16px;
                                }
                            }
                            .vip-level-names{
                                text-align: left;
                                color: @main-theme-color;
                                .fz(12px);
                                small{
                                    .fz(12px);
                                }
                            }
                            .receiveNum{
                                position: absolute;
                                bottom: 0;
                                right: 0;
                                color: @main-theme-color;
                                font-style:italic;
                                .fz(12px);
                                padding-right: 4px;
                            }
                        }
                    }
                }
                .coupon-vou-button {
                    padding: 10px;
                    font-size: 12px;
                    text-align: center;
                    width: 90px;
                    /*background-color: #e7e6fd;*/
                    position: relative;
                    height: 100px;
                    border-left: 1px dashed #ddd;
                    &:before {
                        content: '';
                        width: 0;
                        height: 0;
                        border-width: 8px 8px 0;
                        border-style: solid;
                        border-color: #e0e0e0 transparent transparent;
                        position: absolute;
                        top: 0;
                        left: -8px;
                    }
                    &::after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: -8px;
                        width: 0;
                        border-right: 8px solid transparent;
                        border-left: 8px solid transparent;
                        border-bottom: 8px solid #e0e0e0;
                    }
                    .coupon-vou-btn-der {
                        width: 85px;
                        height: 35px;
                        line-height: 35px;
                        color: #ffffff;
                        border-radius: 70px;
                        position: absolute;
                        bottom: 40%;
                        right: 12px;
                        font-size: 12px;
                        &.to-use{
                            border: 1px solid @main-theme-color;
                            background: @main-theme-color;
                        }
                        &.used{
                            border: 1px solid lightgray;
                            background: lightgray;
                        }
                        &.expired{
                            border: 1px solid lightgray;
                            background: lightgray;
                        }

                    }
                }
            }
        }
    }
}
</style>
